<template>
	<view class="content">
		<view class="header">
			<navigator url="">
				<text class="cuIcon-back"></text>
			</navigator>
			积分记录
		</view>
		
		<view class="mes">
			<view class="mes_detail">
				<ul>
					<li>
						<span>{{invite}}</span>
						<font>累计邀请</font>
					</li>
					<li>
						<span>{{active}}</span>
						<font>保持活跃</font>
					</li>
					<li>
						<span>{{point}}</span>
						<font>当前积分</font>
					</li>
				</ul>
			</view>
		</view>
		
		<view class="grade_detail">
			<view class="grade_title">
				<ul>
					<li>时间</li>
					<li>用户名</li>
					<li>类型</li>
					<li>奖励</li>
				</ul>
			</view>
			<view class="grade_info">
				<ul>
					<li v-for="(item,index) in gradeInfo" :key="index">
						<span>{{item.createtime}}</span>
						<span>{{item.user_name}}</span>
						<span>{{item.p_type}}</span>
						<span><img src="../../static/icon/award.png" alt="">+{{item.point}}</span>
					</li>
					
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gradeInfo:[],
				invite:'',
				active:'',
				point:''
			}
		},
		onLoad() {
			let user_mes = uni.getStorageSync('user_info');
			// console.log(user_mes);
			let user_id = user_mes.user_id;
			uni.request({
				url:'http://221.234.36.126:82/api.php/User/point_list',
				method:'POST',
				data:{
					token: '1CECE2221211DDCB613882C3311EC670',
					user_id:user_id
				},
				success: (res) => {
					console.log(res.data);
					let infoList = res.data.list;
					this.gradeInfo = infoList;
					this.invite = res.data.invite_count;
					this.active = res.data.active;
					this.point = res.data.point;
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
uni-page-body{
	background-color: #f7f7f7;
	height: 100%;
}
body{
	background-color: #f7f7f7;
}	
	
.header{
	width: 100%;
	padding-top: 38rpx;
	background-color: #58C5FE;
	/* height: 70px; */
	/* box-sizing: content-box; */
	position: relative;
	text-align: center;
	color: #ffffff;
	font-size: 34rpx;
	line-height: 34rpx;
}

.header navigator{
	position: absolute;
	left: 30rpx;
	top: 38rpx;
}

.header navigator text{
	font-size: 34rpx;
}

.mes{
	width: 100%;
	height: 200rpx;
	background-color: #58C5FE;
	position: relative;
}

.mes_detail{
	width: 690rpx;
	height: 200rpx;
	border-radius: 10rpx;
	background-color: #fff;
	position: absolute;
	top: 55rpx;
	left: 30rpx;
	overflow: hidden;
}

.mes_detail ul{
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 70rpx;
	justify-content: space-between;
}

.mes_detail ul li{
	padding-top: 50rpx;
}

.mes_detail ul li span{
	display: block;
	text-align: center;
	color: #00A7FF;
	font-size: 40rpx;
}

.mes_detail ul li font{
	display: block;
	font-size: 30rpx;
	color: #666666;
	margin-top: 20rpx;
}

.grade_detail{
	width: 690rpx;
	margin: 0 auto;
	min-height:800rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 85rpx;
	overflow: hidden;
}

.grade_title{
	width: 100%;
	height: 84rpx;
	background-color: #95DBFF;
}

.grade_title ul{
	width: 100%;
	height: 100%;
	display: flex;
}

.grade_title ul li{
	width: 30%;
	height: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 30rpx;
	color: #FFFFFF;
}

.grade_title ul li:first-of-type{
	width: 20%;
}

.grade_title ul li:last-of-type{
	width: 20%;
}

.grade_info{
	width: 100%;
	margin-top: 14rpx;
}

.grade_info ul{
	width: 100%;
}

.grade_info ul li{
	width: 100%;
	height: 70rpx;
	/* line-height: 70rpx; */
	display: flex;
}

.grade_info ul li span{
	display: block;
	width: 30%;
	text-align: center;
	font-size: 28rpx;
	height: 70rpx;
	line-height: 70rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.grade_info ul li span:first-of-type{
	width: 20%;
}

.grade_info ul li span:last-of-type{
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: #FFAF24;
}

.grade_info ul li span:last-of-type img{
	display: block;
	width: 30rpx;
	height: 30rpx;
	margin-right: 6rpx;
}

</style>
